<template>
  <div class="role-management-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>角色管理</span>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text"
          @click="addRoleDialogVisible = true"
        >
          新增角色
        </el-button>
      </div>
      
      <el-table :data="roles" style="width: 100%">
        <el-table-column prop="name" label="角色名称" width="180"></el-table-column>
        <el-table-column prop="permissions" label="权限"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增角色对话框 -->
    <el-dialog title="新增角色" :visible.sync="addRoleDialogVisible" width="30%">
      <el-form :model="newRole" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="newRole.name"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-checkbox-group v-model="newRole.permissions">
            <el-checkbox label="用户管理" name="type"></el-checkbox>
            <el-checkbox label="内容管理" name="type"></el-checkbox>
            <el-checkbox label="系统设置" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RoleManagement',
  data() {
    return {
      roles: [
        { name: '管理员', permissions: '访问并使用后台管理系统及论坛官网的所有功能' },
        { name: '普通用户', permissions: '访问并使用官网的所有功能' }
      ],
      addRoleDialogVisible: false,
      newRole: {
        name: '',
        permissions: []
      }
    }
  },
  methods: {
    addRole() {
      if (!this.newRole.name) {
        this.$message.error('请输入角色名称');
        return;
      }
      
      this.roles.push({
        name: this.newRole.name,
        permissions: this.newRole.permissions.join(', ')
      });
      
      this.addRoleDialogVisible = false;
      this.newRole = { name: '', permissions: [] };
      this.$message.success('角色添加成功');
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除该角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.roles.splice(index, 1);
        this.$message.success('删除成功');
      }).catch(() => {});
    }
  }
}
</script>

<style scoped>
.role-management-container {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
</style>